<template>
	<div class="app-container">
		<el-row :gutter="10">
			<el-col :xs="24" :sm="24" :md="10" :lg="11" :xl="11" style="margin-bottom: 10px; width: 55%;">
				<el-card class="box-card">
					<!--工具栏-->
					<div class="head-container">
						<!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
						<div v-if="crud.props.searchToggle">
							<!-- 搜索 -->
							<el-select v-model="query.periodId" clearable filterable placeholder="参训期次"
								class="filter-item" @change="selPeriodChange">
								<el-option v-for="item in periods" :key="item.periodId" :label="item.name"
									:value="item.periodId" />
							</el-select>
							<el-select v-model="query.classId" clearable filterable placeholder="班级"
								class="filter-item" style="width: 100px;">
								<el-option v-for="item in classes" :key="item.classId" :label="item.name"
									:value="item.classId" />
							</el-select>
							<el-input v-model="query.name" clearable size="small" placeholder="学生姓名"
								style="width: 130px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
							<rrOperation />
						</div>
						<crudOperation :permission="permission" />
						<!--表格渲染-->
						<el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small"
							style="width: 100%;" row-key="studentId" @select="crud.selectChange"
							@select-all="crud.selectAllChange" @selection-change="crud.selectionChangeHandler"
							@current-change="handleCurrentChange">
							<el-table-column type="selection" width="45" />
							<el-table-column prop="period.name" label="参加培训期次" width="225" />
							<el-table-column prop="classModel.name" label="培训班级" width="80" align="center" />
							<el-table-column prop="name" label="姓名" width="60" />
							<!-- <el-table-column prop="school" label="学校" width="100" /> -->
							<el-table-column prop="college.name" label="学院" width="130" />
							<el-table-column prop="majorDepart.name" label="专业" width="120" />
							<!-- <el-table-column prop="typeId" label="贫困类型" width="130">
					<template slot-scope="scope">
						{{ dict.label.student_type[scope.row.typeId] }}
					</template>
				</el-table-column> -->
						</el-table>
						<!--分页组件-->
						<pagination />
					</div>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24" :md="14" :lg="13" :xl="13" style="width: 45%;">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>个性化就业指导详情<label v-if="selStudentName != ''">——{{selStudentName}}</label></span>
					</div>
					<guidanceInfo ref="guidanceInfo" :permission="permission" />
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import guidanceInfo from './guidanceInfo'
	import crudStudent from '@/api/student'
	import CRUD, {
		presenter,
		header,
		form,
		crud
	} from '@crud/crud'
	import rrOperation from '@crud/RR.operation'
	import crudOperation from '@crud/CRUD.operation'
	import udOperation from '@crud/UD.operation'
	import pagination from '@crud/Pagination'
	import {
		getPeriods
	} from '@/api/period'
	import {
		getDepartments
	} from '@/api/department'
	import {
		getClasses
	} from '@/api/class'

	const defaultForm = {
		studentId: null,
		userId: null,
		name: null,
		school: null,
		collegeId: null,
		majorDepartId: null,
		phone: null,
		idCardNo: null,
		typeId: null,
		participationDate: null,
		isPass: null,
		isSatisfy: null,
		isWorked: null,
		enabled: 'true',
		workUnit: null
	}
	export default {
		name: 'Student',
		components: {
			guidanceInfo,
			pagination,
			crudOperation,
			rrOperation,
			udOperation
		},
		mixins: [presenter(), header(), form(defaultForm), crud()],
		dicts: ['student_type', 'data_status', 'is_satisfy'],
		cruds() {
			return CRUD({
				title: '学生',
				url: 'api/student',
				idField: 'studentId',
      query: {
        refTeacherUserId: null
      },
				sort: 'periodId,studentId,asc',
				crudMethod: {
					...crudStudent
				}
			})
		},
		data() {
			return {
				periods: [],
				colleges: [],
				majorDeparts: [],
				classes: null,
				selStudentName: '',
				permission: {
					add: ['admin', 'student:add'],
					edit: ['admin', 'student:edit'],
					del: ['admin', 'student:del']
				},
				selTypeOptions: [{
						key: 'true',
						display_name: '是'
					},
					{
						key: 'false',
						display_name: '否'
					}
				],
				rules: {
					name: [{
						required: true,
						message: '姓名不能为空',
						trigger: 'blur'
					}]
				}
			}
		},
		computed: {
			...mapGetters([
				'user'
			])
		},
		methods: {
			// 钩子：在获取表格数据之前执行，false 则代表不获取数据
			[CRUD.HOOK.beforeRefresh]() {
				console.log(this.user)
				for (var i = 0; i < this.user.roles.length; i++) {
					if(this.user.roles[i].name ==='教师用户'){
						this.query.refTeacherUserId = this.user.id
						break
					}
				}
				
				
				if (this.$refs.guidanceInfo) {
					this.$refs.guidanceInfo.query.studentId = ''
				}
				// 加载培训期次信息
				this.periods = [] // 先清空之前的培训期次信息
				getPeriods({
					enabled: true
				}).then(res => {
					this.periods = res.content
				})
				return true
			},
			[CRUD.HOOK.afterToCU](crud, form) {
				// 加载培训期次信息
				//this.periods = [] // 先清空之前的培训期次信息
				var params = {
					enabled: true
				}
				// 加载培训期次信息
				// getPeriods(params).then(res => {
				// 	this.periods = res.content
					if (form.studentId == null)
						form.periodId = this.periods[0].periodId
					else {

						for (var i = 0; i < this.periods.length; i++) {
							if (this.periods[i].periodId == `${form.periodId}`)
								form.periodId = this.periods[i].periodId
						}
					}
				// })

				//加载学院信息
				getDepartments({
					pid: null,
					enabled: true
				}).then(res => {
					this.colleges = res.content
					if (form.studentId == null) {
						form.collegeId = this.colleges[0].deptId
					} else {
						for (var i = 0; i < this.colleges.length; i++) {
							if (this.colleges[i].deptId == `${form.collegeId}`)
								form.collegeId = this.colleges[i].deptId
						}
						getDepartments({
							pid: form.collegeId,
							enabled: true,
						}).then(res => {
							this.majorDeparts = res.content
							for (var i = 0; i < this.majorDeparts.length; i++) {
								if (this.majorDeparts[i].deptId == `${form.majorDepartId}`)
									form.majorDepartId = this.majorDeparts[i].deptId
							}
						})
					}
				})

				//设置学生的班级信息
				if (form.studentId) {
					for (var i = 0; i < this.classes.length; i++) {
						if (this.classes[i].classId == `${form.classId}`)
							form.classId = this.classes[i].classId
					}
				}

				form.enabled = `${form.enabled}`
				if (form.studentId) {
					form.isPass = `${form.isPass}`
					form.isSatisfy = `${form.isSatisfy}`
					form.isWorked = `${form.isWorked}`
					form.typeId = `${form.typeId}`
				}
			},
			selPeriodChange(e){
				//加载班级信息
				getClasses({
					periodId: e,
					enabled: true
				}).then(res => {
					this.classes = res.content
					
				})
			},
			loadMajorDeparts(e) {
				this.majorDeparts = []
				if (e == null) return
				getDepartments({
					pid: e,
					enabled: true,
				}).then(res => {
					this.majorDeparts = res.content
				})
			},
			// 选中字典后，设置字典详情数据
			handleCurrentChange(val) {
				if (val) {
					this.$refs.guidanceInfo.query.studentId = val.studentId
					this.$refs.guidanceInfo.studentName = val.name
					this.selStudentName = val.name
					this.$refs.guidanceInfo.crud.toQuery()
				}
			}
		}
	}
</script>

<style scoped>

</style>
